<template>
  <view class="bg">
    <u-toast ref="uToast"></u-toast>
    <!--编辑内容-->
    <view class="edit common">
      <u--form
          :model="userInfo"
          :rules="rules"
          ref="form1"
          errorType="message"
      >
        <u-cell-group
            :border="false"
        >
          <!--头像-->
          <u-cell
              title="头像"
              label="后续将支持更改头像"
          >
            <view
                slot="value">
              <u-avatar
                  v-if="userInfo.avatarUrl!==''"
                  :text="userInfo.name[0]"
                  :size="50"
                  random-bg-color
              ></u-avatar>
              <u-avatar
                  v-else
                  :size="50"
                  :src="userInfo.avatarUrl"
              ></u-avatar>
            </view>
          </u-cell>
          <!--姓名-->
          <u-cell
              title="姓名"
              label="点击修改姓名，请填写真实姓名"
          >
            <u-form-item
                slot="value"
                prop="tel"
                ref="userInfo.name"
            >
              <u-input
                  v-model="userInfo.name"
                  border="none"
                  input-align="right"
              >
              </u-input>
            </u-form-item>
          </u-cell>
          <!--电话-->
          <u-cell
              title="电话"
              label="点击修改电话"
          >
            <u-form-item
                slot="value"
                prop="tel"
                ref="userInfo.tel"
            >
              <u-input
                  v-model="userInfo.tel"
                  type="number"
                  border="none"
                  input-align="right"
              >
              </u-input>
            </u-form-item>
          </u-cell>
          <!--邮箱-->
          <u-cell
              title="邮箱"
              label="点击修改邮箱地址"
          >
            <u-form-item
                slot="value"
                prop="email"
                ref="userInfo.email"
            >
              <u-input
                  v-model="userInfo.email"
                  border="none"
                  input-align="right"
              >
              </u-input>
            </u-form-item>
          </u-cell>
          <!--角色-->
          <u-cell
            title="角色"
            label="管理层招纳贤士"
            :value="(userInfo.role === 0 )?'用户':'管理员'"
          >
          </u-cell>
        </u-cell-group>
      </u--form>
      <!--信息收集提示-->
      <view class="text">
        <u-alert
            title="注意事项"
            description="姓名，手机号和邮箱信息仅在借阅归还消息提醒中使用，不做其他用途"
            type="info"
            :show-icon="true"
        >
        </u-alert>
      </view>
      <!--保存-->
      <view class="btn">
        <u-button
        text="授权信息并保存"
        type="primary"
        shape="circle"
        :disabled="!btnStatus"
        :loading="!btnStatus"
        loading-text="正在保存"
        plain
        @click="saveUserInfo"
        :custom-style="{
      width:'50vw'
      }"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      rules: {
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            validator: (rule, value, callback) => {
              // 返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          }
        ],
        email: [
          {
            required: true,
            message: '请填写邮箱',
            trigger: ['blur', 'change']
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.email(value);
            },
            message: '请填写正确的邮箱',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          }
        ],
        name:{
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        }
      },
      btnStatus:true
    }
  },
  methods: {
    //读取用户信息
    getUserInfo() {
      this.userInfo = uni.getStorageSync("userInfo")
    },
    //保存用户信息
    saveUserInfo(){
      let _this = this
      this.btnStatus =false
      //表单验证
      this.$refs.form1.validate().then(async res=>{
        //获取数据源
        const db = uniCloud.database()
        await db.collection('user')
            .doc(this.userInfo._id)
            .update({
              name:this.userInfo.name,
              tel:this.userInfo.tel,
              email:this.userInfo.email
            })
            .then(res=>{
              //保存信息
              uni.setStorageSync("userInfo",_this.userInfo)
              this.$refs.uToast.show({
                message: '保存成功',
                type: 'success',
                position:'top',
                complete(){
                  _this.btnStatus=true
                }
              })
            })
            .catch(err=>{
              console.log(err)
              this.$refs.uToast.show({
                message: err+'' ||'保存失败',
                type: 'error',
                position:'top',
                complete(){
                  _this.btnStatus=true
                }
              })
            })
      }).catch(err =>{
        this.$refs.uToast.show({
          message: '保存失败',
          type: 'error',
          position:'top',
          complete(){
            _this.btnStatus = true
          }
        })
      })
    },
    //修改头像
    actionSelect(index){
      switch (index) {
        case 0:{

        }
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  onReady() {
    this.$refs.form1.setRules(this.rules)
  }
}
</script>

<style lang="scss">
.bg {
  height: 100vh;
  .edit {
    .btn{
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 20px;
    }
    .text {
      width: 100%;
    }
  }
}

</style>